<template>
  <view class="all_info">
    <view class="header">
      <icon type="search" size="14"></icon>
      <uni-easyinput v-model="keyValues" placeholder="搜索歌曲" trim="all" @input="handleInput" placeholderStyle="font-size:28rpx" @focus="handleFocus"></uni-easyinput>
      <text @click="handleSearch">搜索</text>
    </view>
    <template v-if="searchSongs.length > 0">
      <view class="search_container_info">
        <view class="search_container" v-for="(item, i) in searchSongs" :key="i" @click="submitSearchKey(item.keyword)">
          <icon type="search" size="14"></icon>
          <text>{{ item.keyword }}</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class=" classify_nav"><u-subsection :list="list" :current="curNow" @change="sectionChange" active-color="#fb6485"></u-subsection></view>
      <songs v-if="curNow === 0"></songs>
      <song-people v-else-if="curNow === 1"></song-people>
      <songs-list v-else-if="curNow === 2"></songs-list>
      <user v-else-if="curNow === 3"></user>
    </template>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  onLoad(options) {
    // console.log(options);
    this.UpdatekeyValue(options.key)
    this.keyValues = this.keyValue
    // console.log(this.keyValue);
  },
  data() {
    return {
      keyValues: '',
      searchSongs: [],
      timer: '',
      historyRecord: [],
      // 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户
      type: [1, 100, 1000, 1002],
      list: [
        {
          name: '单曲'
        },
        {
          name: '歌手'
        },
        {
          name: '歌单'
        },
        {
          name: '用户'
        }
      ],
      // 当前导航栏索引
      curNow: 0
    }
  },
  computed: {
    ...mapState(['historyRecords', 'keyValue'])
  },
  methods: {
    ...mapMutations(['UpdatekeyValue', 'UpdateSearchRecord']),
    sectionChange(index) {
      this.curNow = index
    },
    handleFocus() {
      // clearTimeout(this.timer)
      // this.timer = setTimeout(() => {
      this.handleInput()
      // }, 1000)
    },
    async getSerachSongs() {
      const { data: res } = await uni.$http.get('search/suggest', { keywords: this.keyValues, type: 'mobile' })
      // console.log(res)
      if (res.code === 200) {
        this.searchSongs = res.result.allMatch
      }
    },
    handleInput() {
      if (!this.keyValues) {
        uni.redirectTo({
          url: '/subpkg/songs_search/songs_search'
        })
        this.searchSongs = []
        return ''
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getSerachSongs()
      }, 500)
    },
    handleSearch() {
      if (this.keyValues) {
        this.historyRecords.unshift(this.keyValues)
        const [...set] = new Set(this.historyRecords)
        // console.log(set);
        this.UpdateSearchRecord(set)
        this.historyRecord = this.historyRecords
        this.UpdatekeyValue(this.keyValues)
        this.searchSongs = []
      }
    },
    submitSearchKey(key) {
      this.keyValues = key
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.all_info {
  // height: 1000rpx;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  height: 100rpx;
}
/deep/ .uni-easyinput .uni-easyinput__content {
  margin: 0 auto;
  width: 95%;
  height: 30%;
  // background-color: #f7f7f7 !important;
  color: #747591;
  font-size: 30rpx;
  border-radius: 15rpx;
  margin-top: 20rpx;
  transform: translateX(-30rpx);
  background-color: #747591;
}
/deep/ .uni-easyinput__content input {
  padding-left: 80rpx !important;
}
.header icon {
  transform: translate(50rpx, 10rpx);
  z-index: 2;
}
.header text {
  transform: translate(-30rpx, 10rpx);
}
/deep/ .uni-icons {
  font-size: 40rpx !important;
}
.classify_nav {
  height: 60rpx;
}
.search_container_info {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}
.search_container {
  display: flex;
  border-top: 5rpx solid #f7f7f7;
  font-size: 25rpx;
  align-items: center;
}
.search_container icon {
  margin: 0 20rpx;
}
.search_container text {
  margin: 30rpx 0;
}
</style>
